<div class="animate">
    <div class="row">
        <div class="col-lg-8 col-md-6">
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Typography
                    </span>
                </div>
                <div class="card-block">
                    <h1>Heading 1 <small>Sub-heading</small> </h1>
                    <h2>Heading 2 <small>Sub-heading</small> </h2>
                    <h3>Heading 3 <small>Sub-heading</small> </h3>
                    <h4>Heading 4 <small>Sub-heading</small> </h4>
                    <h5>Heading 5 <small>Sub-heading</small> </h5>
                    <h6>Heading 6 <small>Sub-heading</small> </h6>
                    <p class="lead">This is an example of lead body copy.</p>
                    <p>This is an example of standard paragraph text. This is an example of <a href="#">link anchor text</a> within body copy.</p>
                    <p> <small>This is an example of small, fine print text.</small> </p>
                    <p> <strong>This is an example of strong, bold text.</strong> </p>
                    <p> <em>This is an example of emphasized, italic text.</em> </p> <br>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-danger card-inverse">
                    <span class="card-title">Blockquotes
                    </span>
                </div>
                <div class="card-block">
                    <h5>Default Blockqoute</h5>
                    <blockquote class="blockquote">
                        <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    </blockquote>
                    <h5>Blockquote with Citation</h5>
                    <blockquote class="blockquote">
                        <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                    </blockquote>
                    <h5>Right Aligned Blockquote</h5>
                    <blockquote class="blockquote blockquote-reverse">
                        <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    </blockquote>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-warning card-inverse">
                    <span class="card-title">Code
                    </span>
                </div>
                <div class="card-block">
                    <p>This is an example of an inline code element within body copy. Wrap inline code within a <code>&lt;code&gt;...&lt;/code&gt;</code>tag.</p>
                    <pre class="breadcrumb">This is an example of preformatted text.</pre>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header card-info card-inverse">
                    <span class="card-title">Unordered Lists</span>
                </div>
                <div class="card-block">
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur </li>
                        <li>elit. Necessitatibus quidem similique</li>
                        <li>lorem ipsum dolor sit amet
                            <ul>
                                <li>on debitis</li>
                                <li>error odio</li>
                                <li> n dolore magni</li>
                            </ul>
                        </li>
                        <li>List Item</li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-warning card-inverse">
                    <span class="card-title">Ordered Lists
                    </span>
                </div>
                <div class="card-block">
                    <ol>
                        <li>List Item lorem ipsum dolor</li>
                        <li>List Item lorem ipsum dolor</li>
                        <li>List Item lorem ipsum dolor</li>
                        <li>List Item lorem ipsum dolor</li>
                    </ol>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Unstyled List
                    </span>
                </div>
                <div class="card-block">
                    <ul class="list-unstyled">
                        <li>List Item lorem ipsum</li>
                        <li>List Item lorem ipsum</li>
                        <li>List Item lorem ipsum</li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-danger card-inverse">
                    <span class="card-title">Inline List
                    </span>
                </div>
                <div class="card-block">
                    <ul class="list-inline">
                      <li class="list-inline-item">Lorem ipsum</li>
                      <li class="list-inline-item"> Phasellus iaculis </li>
                      <li class="list-inline-item">Nulla volutpat</li>
                    </ul>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-info card-inverse">
                    <span class="card-title">Emphasis Classes
                    </span>
                </div>
                <div class="card-block">
                    <span class="text-muted">This is an example of muted text.</span><br>
                    <span class="text-primary">This is an example of primary text.</span><br>
                    <span class="text-success">This is an example of success text.</span><br>
                    <span class="text-info">This is an example of info text.</span><br>
                    <span class="text-warning">This is an example of warning text.</span><br>
                    <span class="text-danger">This is an example of danger text.</span>
                </div>
            </div>
            <div class="card">
                <div class="card-header card-primary card-inverse">
                    <span class="card-title">Alignment Helpers
                    </span>
                </div>
                <div class="card-block">
                    <p class="text-xs-left">Left aligned text on all viewport sizes.</p>
                    <p class="text-xs-center">Center aligned text on all viewport sizes.</p>
                    <p class="text-xs-right">Right aligned text on all viewport sizes.</p>
                </div>
            </div>
        </div>
    </div>
</div>
